<!-- 滑动切换选项卡演示(标准写法) -->
<template>
  <!-- 使用z-paging-swiper为根节点可以免计算高度 -->
  <view class="">
    <!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
    <!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
    <template #top />
    <view class="">
      <u-swiper
        class="w-full" height="400rpx" bg-color="#fff" :list="list3"
        previous-margin="30"
        next-margin="30"
        circular
        :autoplay="false"
        radius="5"
      />
      <up-image
        class="mx-auto mb-50rpx h-100rpx w-100rpx -mt-50rpx" shape="circle"
        src="/static/images/logo.png"
        width="100rpx"
        height="100rpx"
      />
      <view class="flex justify-center">
        <text class="font-size-36rpx color-gray-700">
          {{ title }}
        </text>
      </view>
      <view class="my-2 flex justify-center gap-2">
        <u-tag text="标签标签" plain shape="circle" /><u-tag text="标签标签标签标签" plain shape="circle" />
      </view>
      <view class="mt-20rpx w-full">
        <u-grid
          :border="false"
          col="5"
        >
          <u-grid-item v-for="(listItem, listIndex) in menu" :key="listIndex">
            <u-icon
              :custom-style="{ paddingTop: `${25}rpx` }"
              :name="listItem.name"
              :size="25"
            />
            <text class="grid-text">
              {{ listItem.title }}
            </text>
          </u-grid-item>
        </u-grid>
      </view>

      <view class="w-full">
        <u-swiper
          class="p-2"
          height="200rpx"
          :list="list3"
          circular
          :autoplay="false"
          radius="5"
          bg-color="#fff"
        />
      </view>
      <view class="w-full">
        <u-swiper
          class="p-2"
          height="200rpx"
          :list="list3"
          circular
          :autoplay="false"
          radius="5"
          bg-color="#fff"
        />
      </view>
      <z-tabs ref="tabs" :list="tabList" :current="current" @change="tabsChange" />
    </view>
    <!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
    <swiper class="swiper" :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
      <swiper-item v-for="(item, index) in tabList" :key="index" class="swiper-item">
        <!-- 这里的swiper-list-item为demo中为演示用定义的组件，列表及分页代码在swiper-list-item组件内 -->
        <!-- 请注意，swiper-list-item非z-paging内置组件，在自己的项目中必须自己创建，若未创建则会报组件不存在的错误 -->
        <swiper-list-item :tab-index="index" :current-index="current" />
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// import request from '/http/request.js';
const list3 = [
  'https://cdn.uviewui.com/uview/swiper/swiper3.png',
  'https://cdn.uviewui.com/uview/swiper/swiper2.png',
  'https://cdn.uviewui.com/uview/swiper/swiper1.png',
];
const title = ref();
title.value = import.meta.env.VITE_APP_TITLE;

const menu = [{
  name: 'photo',
  title: '图片',
}, {
  name: 'lock',
  title: '锁头',
}, {
  name: 'star',
  title: '星星',
}, {
  name: 'hourglass',
  title: '沙漏',
}, {
  name: 'home',
  title: '首页',
}, {
  name: 'star',
  title: '音量',
}];
// const paging = ref(null);
const tabs = ref(null);

const current = ref(0);
const tabList = ref(['测试1', '测试2', '测试3', '测试4']);

// useZPaging(paging);
// tabs通知swiper切换
function tabsChange(index) {
  current.value = index;
}

// swiper滑动中
function swiperTransition(e) {
  tabs.value.setDx(e.detail.dx);
}

// swiper滑动结束
function swiperAnimationfinish(e) {
  current.value = e.detail.current;
  tabs.value.unlockDx();
}
</script>

<style>
      .swiper {
            height: 100vh;
      }
</style>
